<template>
	<view class="my_info br6">
		<!--地址-->
		<view class="add-address d-s-c" @click="addAddress()" v-if="!addressObj">
			<view class="icon-box mr10">
				<text class="icon iconfont icon-dizhi1"></text>
			</view>
			<text>请添加收货地址</text>
		</view>
		<view v-else class="address-defalut-wrap" @click="addAddress()">
			<view class="d-b-c">
				<view class="add-addr flex-1">
					<view class="flex-1">
						<view class="d-s-c" style="height: 50rpx;">
							<view class="d-c-c f20" style="
                  width: 56rpx;
                  height: 32rpx;
                  background: #00c8be;
                  border-radius: 8rpx;
                "><text class="white">默认</text></view>
							<text class="f36 ml10 fb">
								{{ addressObj.fullname || "" }}
							</text>
							<text class="f36 ml10 fb">
								{{ addressObj.mobilePhone || "" }}
							</text>
						</view>
						<view class="info mb10">
							<text class="province-c-a f32 fb text-ellipsis-2">
								{{ addressObj.prov + ' ' + addressObj.city + ' ' + addressObj.area + '' }}
								{{ addressObj.address || "" }}
							</text>
						</view>
					</view>
					<view class="ml80 f-s-0">
						<button class="btn" v-if="orderDetail.order_status.value==1" >修改</button>
					</view>
				</view>
			</view>
		</view>
		<view class="bottom_line"></view>
	</view>
</template>

<script>
	const baseData = {
		tokenInfo: "",
		addressObj: null
	};

	const funcs = {};
	funcs.addAddress = function() {
		this.tokenInfo = uni.getStorageSync("token");
		if (!this.tokenInfo)
			return uni.showToast({
				title: "请先登录",
				icon: "none",
				mask: true,
			});

		const address = this.exist_address;
		// if (address && typeof address === "object") return;
		if(this.orderDetail.order_status.value !=1) return;
		my.getAddress({
			success: (res) => {
				if (res.resultStatus == 9000) {
					this.addressObj = res.result;
					this.exist_address.city = this.addressObj.city
					this.exist_address.detail = this.addressObj.address
					this.exist_address.name = this.addressObj.fullname
					this.exist_address.phone = this.addressObj.mobilePhone
					this.exist_address.province = this.addressObj.prov
					this.exist_address.region.city = this.addressObj.city
					this.exist_address.region.province = this.addressObj.prov
					this.exist_address.region.region = this.addressObj.area
					this.exist_address.region = JSON.stringify(this.exist_address.region)
					this._post('user.order/updateAddress',this.exist_address,function(res){
						if(res.code===1){
							console.log(res,'res1111')
						}
					})
					// this.$emit("changestates", this.addressObj);
					//       this.$emit("changeStates", this.addressObj);
				}
			},
			fail: (res) => {
				my.alert({
					title: "getAddress fail",
					content: JSON.stringify(res),
				});
			},
		});
	};

	const mounted = function() {
		console.log('...', this.orderDetail)
		const address = this.exist_address;
		if (address && typeof address === 'object') {
			const origin = this.exist_address || {};
			const region = origin.region || {};
			this.addressObj = {
				fullname: origin.name,
				mobilePhone: origin.phone,
				prov: region.province,
				city: region.city,
				area: region.region,
				detail:origin.detail
			}
		}
	}

	export default {
		data() {
			return {
				...baseData
			};
		},
		props: ["exist_address",'orderDetail'],
		methods: {
			...funcs
		},
		mounted
	};
</script>

<style lang="scss">
	.info {
		font-size: 33rpx;
		line-height: 43rpx;
	}

	.add-addr {
		display: flex;
		align-items: center;
	}

	.tel {
		font-size: 27rpx;
		color: #999999;
	}

	.choose-address {
		width: 88rpx;
		height: 88rpx;
		margin-right: 35rpx;
	}

	.icon-dizhi {
		margin-right: 25rpx;
		color: #ff6633;
		font-size: 60rpx;
	}

	.addree_icon {
		width: 42rpx;
		height: 42rpx;
	}

	.my_info {
		background-color: #ffffff;
		margin-top: 16rpx;
		
	}

	.icon-box .icon.icon-dizhi1 {
		@include font_color("font_color");
		font-size: 44rpx;
	}

	.my_info .icon.icon-jiantou {
		color: #333333;
		font-size: 24rpx;
	}

	.bottom_line {
		height: 10upx;
		background-image: linear-gradient(-45deg,
				#4cd9d2 0,
				#4cd9d2 10px,
				transparent 10px,
				transparent 15px,
				#fea295 15px,
				#fea295 25px,
				transparent 25px,
				transparent 30px);
		background-size: 40px 4upx;
		background-repeat: repeat-x;
		background-position: left bottom;
	}

	.btn {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 60px;
		height: 30px;
		border-radius: 30px;
		border: 1px solid black;
	}
</style>